<template>
	<view>
		<nav-back></nav-back>

		<view class="upload" v-show="!showCut">
			<view class="title">
				<text>请上传头像 </text>
			</view>
			<view class="tip">
				<image src="/static/img/tip.png" mode="" />
				请上传本人真实照片，正面高清，衣着得体
			</view>

			<view class="avatar">
				<view class="img">
					<image :src="avatarUrl" mode="" />
				</view>
				<view class="ways">
					<view class="way uni-login" @click="handleUpload">
						<image src="/static/img/upload.png" mode="" />
						<text>本地上传</text>
					</view>
					<view class="way tel-login" @click="handleCamera">
						<image src="/static/img/camera.png" mode="" />
						<text>拍照上传</text>
					</view>
					
				</view>
			</view>

			<button class="next" type="primary" @click="handleNext">下一步</button>
		</view>

		<view class="layers" v-show="showCut">
			<image-cropper ref="cropper" :cropScale="cropScale" :src="avatarUrl" @crop="handleCrop">
			</image-cropper>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'
	import imageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';

	export default {
		components: {
			NavBack,
			imageCropper
		},
		data() {
			return {
				avatarUrl: 'https://q8.itc.cn/q_70/images03/20240109/6e7ee66bc1264aa68a1e987e1fec8c9b.jpeg',
				avatar: '',
				showCut: false,
				cropScale: '1:1', //裁剪比例，默认1:1
				width: 500,
				// imgSrc: 'https://img1.baidu.com/it/u=3893389324,4043822814&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
				imgSrc: null, //需要裁剪地址
				imgPath: null, //裁剪后图片地址
				isfrom: null, //页面来源
			}
		},
		methods: {
			handleCrop(e) {
				let that = this;
				// console.log(e)
				if (e && e.tempFilePath) {
					var filePath = null;
					// #ifdef H5
					// 返回besa64 {tempFilePath: '…qD4BlmXardc/z2wLW/we1LoP21+aEvgAAAABJRU5ErkJggg=='}
					this.avatarUrl = e.tempFilePath;
					that.showCut = false
					console.log(this.avatarUrl,'this.imgPath');
					request(`/common/uploadBase64`,{
						method:'POST',
						data:{
						  file: this.avatarUrl.slice(22),
						  filename:""
						}
					  }).then(((res)=>{
						console.log(res.data.data,'res');
						that.avatar = res.data.data
					  }))
					// #endif
					// #ifdef MP-WEIXIN
					// 返回缓存地址 {tempFilePath: "http://tmp/92DOAKXWBPmrb8fd3ad722b9693120bf7ab6dbda5f18.png"}
					var filePaths = e.tempFilePath;
					uni.getFileSystemManager().readFile({
						filePath: filePaths, //选择图片返回的相对路径
						encoding: 'base64', //编码格式
						success: res => { //成功的回调
							//console.log('data:image/png;base64,'+res.data)
							that.avatarUrl = 'data:image/png;base64,' + res.data;
							that.showCut = false
							request(`/common/uploadBase64`,{
								method:'POST',
								data:{
								  file: that.avatarUrl,
								  filename:""
								}
							  }).then(((res)=>{
								console.log(res.data.data,'res');
								that.avatar = res.data.data
							  }))
						}
					})
					// #endif
				}
			},
			handleUpload() {
				let that = this
				uni.chooseImage({
					count: 1,
					mediaType: ['mix'],
					sourceType: ['album'],
					maxDuration: 30,
					camera: 'front',
					success(res) {
						that.avatarUrl = res.tempFilePaths[0]
						that.showCut = true
						that.$forceUpdate()
						console.log(res.tempFilePaths[0],that.showCut, 'res')
					}
				})
			},
			handleCamera() {
				let that = this
				uni.chooseImage({
					count: 1,
					mediaType: ['mix'],
					sourceType: ['camera'],
					maxDuration: 30,
					camera: 'front',
					success(res) {
						that.avatarUrl = res.tempFilePaths[0]
						that.showCut = true
						that.$forceUpdate()
						console.log(res.tempFilePaths[0], that.showCut,'res')
					}
				})
			},
			handleNext() {
				if (!this.avatar) {
					uni.showToast({
						title: '请上传您的头像',
						icon: 'none',
						duration: 2000
					})
					return
				}
				getApp().globalData.userInfo.avatar = this.avatar
				console.log(this.avatar, 'this.avatar');
				uni.navigateTo({
					url: '/pages/userInfo/nickName/nickName'
				})
			},
		}
	}
</script>

<style lang="scss">
	/* pages/avatar/avatar.uniss */
	@import "@/style/register.scss";

	.tip {
		display: flex;
		align-items: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.layers {
		height: 300rpx;
		background-color: rgb(175, 71, 71);
		overflow: hidden;
	}

	my-cropper {
		height: 300rpx;
		background-color: rgb(43, 109, 49);
	}

	.avatar {
		width: 400rpx;
		margin: 10vh auto;

		.img {
			width: 400rpx;
			height: 400rpx;
			border-radius: 40rpx;

			image {
				width: 400rpx;
				height: 400rpx;
				display: block;
				border-radius: 40rpx;
			}
		}

		.ways {
			width: 100%;
			margin: 50rpx auto;
			text{
				font-size: 28rpx;
			}
			.way {
				display: flex;
				height: 80rpx;
				margin-top: 20rpx;
				border-radius: 100rpx;
				justify-content: center;
				align-items: center;

				image {
					width: 40rpx;
					height: 36rpx;
					margin: 0 20rpx;
				}
			}

			.uni-login {
				color: aliceblue;
				background-color: #9C9CFF;
			}

			.tel-login {
				color: #9C9CFF;
				background-color: #EBEBFF;
			}
		}
	}
</style>